<template>
  <div class="store-account">
    <h1 style="font-size: 23px;">商店账户</h1>
    <!-- 分割线 -->
    <el-divider></el-divider>
    <el-table :data="storeAccountList">
      <el-table-column prop="accountId" label="商店账户ID"></el-table-column>
      <el-table-column label="商店名称">
        <template v-slot="scope">
          <div v-if="stores.length > scope.$index">{{ stores[scope.$index].storeName }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="balance" label="账户余额">
        <template v-slot="scope">
          {{ scope.row.balance.toFixed(2) }}
        </template>
      </el-table-column>
      <el-table-column prop="status" label="账户状态">
        <template v-slot="scope">
          <el-tag type="success" v-if="scope.row.status === 1">正常</el-tag>
          <el-tag type="danger" v-else-if="scope.row.status === 2">已注销</el-tag>
          <el-tag type="warning" v-else>异常</el-tag>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>


<script setup>
import {onMounted, ref, getCurrentInstance} from 'vue'
import {useStore} from 'vuex'

const store = useStore();
const {proxy} = getCurrentInstance();

let storeAccountList = ref([]);
let stores = ref([]);

// 获取商户的所有商店账户
const getStoreAccountFromSeller = async (userId) => {
  let res = await proxy.$api.account.getStoreAccountFromUser({
    userId: userId
  }).catch(error => console.log(error));
  storeAccountList.value = res.data;
}

// 获取商户拥有的所有商店
const getMyStore = async (userId) => {
  let res = await proxy.$api.store.getSellerStore(userId);
  stores.value = res.data;
}

onMounted(async () => {
  await getStoreAccountFromSeller(store.state.user.userId);
  await getMyStore(store.state.user.userId);
})

</script>


<style lang="less" scoped>
.store-account {
  background: linear-gradient(180deg, #ecf0f5ee 0%, #ffffffea 100%);
  padding: 30px;
  border-radius: 10px;

  /* 分割线 */

  .el-divider {
    border-top: 2px solid rgba(170, 165, 165, 0.651);
  }
}
</style>
